<template>
  <div id="home" style="height: 100%">
   <el-container style="height: 100%">
        <el-aside width="200px" style="width:200px;height:100%;overflow:hidden;">
            <Menu></Menu>
      </el-aside>
      <el-container>
        <el-header>
        <el-row :gutter="5" style="margin-top:10px ;margin-right: 10px">
          <el-col :span="6">
            <div class="static" style="background-color: #287cd0">
              <div class="title">
                <p style="font-size: 16px;">官方接口: {{ real_time_dates.Api_shopp_count }}</p>
                <el-tag size="mini">实时</el-tag>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="static" style="background-color: #e8bb44">
              <div class="title">
                <p style="font-size: 16px;">用例执行数: {{real_time_dates.UnReadNews_case_count}}</p>
                <el-tag size="mini">实时</el-tag>
              </div>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="static" style="background-color: #67d269">
              <div class="title">
                <p style="font-size: 16px;">在线人数: {{real_time_dates.user_run_count}}</p>
                <el-tag size="mini">实时</el-tag>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="static" style="background-color: #9d9593">
              <div class="title">
                <p style="font-size: 16px;">监控接口数: {{real_time_dates.Watchs_api_count}}</p>
                <el-tag size="mini">实时</el-tag>
              </div>
            </div>
          </el-col>
          <el-col>
            <div>
              <div>
              </div>
            </div>
          </el-col>
        </el-row>
        </el-header>
        <el-main>
            <el-card class="box-card" style=";width: 30%;float: left;margin-right: 10px">
              <div slot="header" class="clearfix" style="text-align: center">
                <span >项目总览</span>
              </div>
                <p>项目总数：{{DB_notice_datas.overview.project_count}}</p>
                <p>接口总数：{{DB_notice_datas.overview.api_count}}</p>
                <p>用例总数：{{DB_notice_datas.overview.cases_count}}</p>
            </el-card>

            <el-card class="box-card" style="width:-webkit-calc(70% - 20px)">
              <div slot="header" class="clearfix">
                <span>上次监控情况</span>
              </div >
                <span style="font-size: xx-small">用例通过率</span>
                <el-progress style="margin-bottom: 30px" :text-inside="true" :stroke-width="25" :percentage="DB_notice_datas.Watchs.api_paas"></el-progress>
                <span  style="font-size: xx-small">接口通过率</span>
                <el-progress style="margin-bottom: 30px" :text-inside="true" :stroke-width="25" :percentage="DB_notice_datas.Watchs.api_loss" status="success"></el-progress>
                <span  style="font-size: xx-small">用例失败/报错率</span>
                <el-progress style="margin-bottom: 30px" :text-inside="true" :stroke-width="25" :percentage="DB_notice_datas.Watchs.cases_pass" status="exception"></el-progress>
            </el-card>
             <el-card class="box-card" style="float: left;width:-webkit-calc(70% - 190px);margin-right: 10px">
              <div slot="header" class="clearfix">
                <span>个人贡献</span>
              </div>
                 <table class="table">
                     <thead>
                        <tr>
                            <th>个人项目占比</th>
                            <th>个人用例占比</th>
                            <th>个人接口占比</th>
                            <th>监控贡献占比</th>
                        </tr>
                     </thead>
                     <tbody style="margin-right: 20%">
                        <tr >
                            <td><el-progress type="circle" :percentage="DB_notice_datas.contribution.user_pro_ject_ab"></el-progress></td>
                            <td><el-progress type="circle" :percentage="DB_notice_datas.contribution.use_pro_cases_zb" style color="#2c3e50"></el-progress></td>
                            <td><el-progress type="circle" :percentage="DB_notice_datas.contribution.user_api__zb" color="green"></el-progress></td>
                            <td><el-progress type="circle" :percentage="DB_notice_datas.contribution.monitor" color="indianred"></el-progress></td>
                        </tr>
                     </tbody>
                 </table>
            </el-card>

            <el-card class="box-card" style="overflow-y: auto;width: 40%;">
              <div slot="header" class="clearfix">
                <span>待处理问题</span>
                <a href="#/send_notic/"><el-button style="float: right; padding: 3px 0" type="text">进入详情</el-button></a>

              </div>
                <div v-for="i in DB_notice_datas.notice_datas" class="text item">
                    {{'通知： ' + i.content }}
                  </div>
            </el-card>
        </el-main>
  <!--        <el-footer style="min-height: 10px;padding-top: 0px;text-align: left">-->
  <!--            <el-card class="box-card" style="overflow-y: auto;width: 100%;min-height: 90%;background:linear-gradient(to left, white, #e5ffff)">-->
  <!--              <div v-for="o in tj_datas.notices"  class="text item">-->
  <!--                {{'平台更新日志： ' + o.content }}-->
  <!--              </div>-->
  <!--            </el-card>-->
  <!--        </el-footer>-->
      </el-container>
    </el-container>
<!--    <template slot-scope="scope">-->
<!--    <el-button-->
<!--    plain-->
<!--    @click="open1">{{scope.row.$index}}-->
<!--  </el-button>-->
<!--    </template>-->

  </div>
</template>

<script>
    import Menu from '../components/Menu.vue'
    import axios from 'axios'

    export default {
      name: 'home',
      data() {
          return {
            // 看板数据统计
            DB_notice_datas:{
              notice_datas:[],
              //项目统计
              overview:{
                project_count:0,
                api_count:0,
                cases_count:0
              },
                    //监控数据
                  Watchs:{cases_pass:0,
                      api_paas:0,
                      api_loss:0,
              },
              //个人数据
              contribution:{
                user_pro_ject_ab:0,
                use_pro_cases_zb:0,
                user_api__zb:0,
                monitor:0,
              },
            },
            //实时更新数据顶部
            real_time_dates:{
              Api_shopp_count:0,
              UnReadNews_case_count:0,
              user_run_count:0,
              Watchs_api_count:0,
            }
          };
        },
      components: {
          Menu,

      },
      // 前段获取数据
      mounted:function  () {
        axios('/DB_notice_datas/').then(res=>{
          this.DB_notice_datas=res.data;
        }
        );
         axios.get('/get_DB_GET_DATE/').then(
                  res=>{
                    this.real_time_dates=res.data
                  }
              )
        //顶部刷新数据
          setInterval(()=>{
              axios.get('/get_DB_GET_DATE/').then(
                  res=>{
                    this.real_time_dates=res.data
                  }
              )
              },100000
          )
        setInterval
      },
      methods:{
      //         open1(index) {
      //   if (this.)
      //   const h = this.$createElement;
      //
      //   this.$notify({
      //     title: '标题名称',
      //     message: h('i', { style: 'color: teal'}, '11111111')
      //   });
      // },
      },

    }
</script>
<style>



    a{
      text-decoration: none;
    }
   .el-header, .el-footer {
    background:linear-gradient(to right, #ffffff, #ffffff);
    color: #333;
    text-align: center;
  }

  .el-aside {
    background-color: #ffffff;
    color: #333;
    text-align: center;

  }

  .el-main {
    background-color: white;
    color: #333;
  }
  .el-card{
      background-color: white;
      text-align: left;
      margin-bottom: 10px;
      overflow-y: hidden;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 0;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
    .box-card{

        max-height: 40%;
        min-height: 48%;
    }
    th,td{
        text-align: center;
          font-size: xx-small;
        width: 7%;
    }
    .static{
      color: #ffffff;
      height: 60px;
      width:95%;
      border-radius: 20px;
      padding: 0 8px;
    }
    .title{
    display:flex;
    justify-content: space-between;
    align-items: center;
    }
    p{
      font-size: 18px;
      font-width: 10px;
    }


</style>